﻿@using Exhort.Backstage.Components;
@using Exhort.Resolver;

@{
    var work = this.GetController();
    var user = ServiceResolver.BasicUser.Get(work.UserID);
}

<!DOCTYPE html>

<html class="work-container">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/content/element/index.css" rel="stylesheet" />
    <link href="/work/home/style.css" rel="stylesheet" />
</head>
<body class="work-container">
    <div class="work-init">
        <img src="/work/home/images/logo.png" />
    </div>
    <el-container id="work-app" v-loading="page.loading" element-loading-spinner="blank" element-loading-background="rgba(0, 0, 0, 0)">
        <el-aside class="work-aside" :width="isCollapse?'auto':'210px'">
            <el-container>
                <el-header>
                    <img :class="['logo',{'collapse':isCollapse}]" src="/work/home/images/logo.png" />
                    <h1 v-if="!isCollapse" class="logo-title">Exhort System 1.0</h1>
                </el-header>
                <el-main>
                    <el-scrollbar ref="menuScrollbar" wrap-class="work-scrollbar-wrapper">
                        <el-menu class="work-menu" background-color="#304156" text-color="#f4f4f5" ref="menu"
                                 :default-active="currentMenu" :collapse-transition="false" :collapse="isCollapse">
                            @Exhort.Backstage.Components.WorkControls.MainMenu(work.UserID, work.IsSuper)
                        </el-menu>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header class="work-header">
                <div class="header-left">
                    <div class="collapse-button">
                        <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" v-on:click="changeCollapse"></i>
                    </div>
                    <el-breadcrumb class="menu-breadcrumb" separator="/">
                        <el-breadcrumb-item><a v-on:click="toWelcome">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{item}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="header-right">
                    <el-dropdown trigger="click" v-on:command="userInfoCmd">
                        <div class="user-info">
                            <el-avatar :size="33" src="/userfiles/head/@(user.Head)"></el-avatar>
                            <span class="name">@(user.Name)</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="myinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="updatepwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :divided="true">注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main class="work-content" v-loading="page.loading">
                <div id="page-html-box" style="display: none;"></div>
                <component ref="pageComponent" :is="page.template"></component>
            </el-main>
        </el-container>
        <el-dialog ref="dialog" v-loading="dialog.loading" v-on:closed="dialogClose" element-loading-background="rgba(255, 255, 255, 0.5)"
                   :title="dialog.title" :width="dialog.width" :visible.sync="dialog.visible" :close-on-click-modal="false">
            <div id="dialog-html-box" style="display: none;"></div>
            <component ref="dialogComponent" :is="dialog.template"></component>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialog.visible=false">关闭</el-button>
                <el-button type="primary" v-on:click="dialog.handle">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
    <script src="/content/vue.js"></script>
    <script src="/content/element/index.js"></script>
    <script src="/content/jquery.min.js"></script>
    <script src="/content/ueditor/ueditor.config.js"></script>
    <script src="/content/ueditor/ueditor.all.min.js"></script>
    <script src="/content/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/work/home/icons.js"></script>
    <script src="/work/home/editor.js"></script>
    <script src="/work/home/script.js"></script>
</body>
</html>